<template>
    <div class="company-intro">
        <!-- 企业信息头部 -->
        <div class="company-header">
            <!-- <el-avatar :size="80" :icon="'el-icon-office-building'" class="company-logo"
                v-if="!companylist.companyLogoUrl">
                XX
            </el-avatar>
            <img :src="companylist.companyLogoUrl" alt="公司Logo" class="company-logo" v-else> -->
            <el-image
            class="company-logo"
            :src="companylist.image"
            fit="contain"
            alt="公司Logo"
          
            style="width: 80px; height: 80px; cursor: pointer;"
            >
            <!--   :preview-src-list="[companylist.image]" -->
            </el-image>
            <div class="company-info">

                <div class="header-row-1">
                    <h1>{{ companylist.name }}</h1>

                    <div class="tags-container">
                        <span v-for="(tag, tagIndex) in companylist.baseIndustryList" :key="tagIndex"
                            class="tilted-tag">
                            <span class="tag-text">{{ tag.name }}</span>
                        </span>
                    </div>
                </div>

                <div class="company-meta">
                    <span class="meta-item">{{ companylist.industry }}</span>
                    <span class="meta-item">{{ companylist.person }}</span>
                </div>
                <p class="company-address">
                    <span>{{ companylist.address }}</span>
                    <span class="upload-date">上传日期 {{ companylist.createTime }}</span>

                </p>
            </div>
            <div class="company-id">
                <span size="medium" type="info">{{ companylist.taxationCode }}</span>
            </div>
        </div>

    
        <div style="margin-top: 20px;background-color: #04142B;border-radius: 5px;padding-top: 30px;box-sizing: border-box;">
            <p class="company-intro-title"><span class="title-text">企业信息介绍</span></p>
            <div class="tab-content-section">
                <h2 class="section-title">企业概述</h2>
                <p class="company-description" style="font-size: 14px;">
                    {{ companylist.description }}
                </p>
            </div>
            <div style="padding: 10px;margin: 200px 0 20px 0;display: flex;justify-content: center;">
            <el-button type="primary" @click="openComplaintDialog">投诉</el-button>
        </div>
        </div>


        

        <!-- 投诉弹窗 -->
        <el-dialog title="企业投诉" :visible.sync="dialogVisible" width="600px" center :close-on-click-modal="false"
            :showClose="false">
            <el-form :model="complaintForm" label-width="00px">
                <el-form-item label="">
                    <el-select v-model="complaintForm.type" placeholder="请选择投诉类型" style="width: 100%">
                        <el-option v-for="item in cplistoptions" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="complaintForm.reason" type="textarea" maxlength="50" show-word-limit  :rows="4" placeholder="请输入投诉原因"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-change="handletpChange" :auto-upload="false" multiple limit="5">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <span style="color: #ddd;font-size: 12px;">图片大小不得超过2M</span>

                    <el-dialog :visible.sync="diaurldialog">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <button class="buttontousu" @click="dialogVisible = false">取消</button>
                <button class="buttontousu2" @click="submitComplaint">提交</button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getEnterpriseDetail, getEnterpriseProductList, getComplaintList, getDictList, GcUploadImage } from '@/api/user';
export default {
    data() {
        return {
            dialogImageUrl: '',
            companylist: {},
            activeTabName: 'intro',
            pageNum: 1,
            pageSize: 10,
            products: [],
            guanlproducts: [],
            dialogVisible: false,
            diaurldialog: false,
            complaintForm: {
                type: '',
                reason: ''
            },
            cplistoptions: [],
            tousuId: "",
            uploadedFileNames: [], // 存储上传成功后的文件名数组
            fileList: [] // 存储用户选择的文件列表
        };
    },
    mounted() {
        this.tousuId = this.$route.query.id;

        const id = this.$route.query.id;
        if (id) {
            this.loadDetailcp(id)
            this.Queryqiyecp(id)
        }
        this.getcpleix()
    },
    methods: {
        getcpleix() {
            getDictList("complaint_products_type").then(res => {
                if (res.code === 200) {
                    this.cplistoptions = res.data;
                } else {
                    this.$message.error('获取状态信息失败')
                }
            })
        },

        handleRemove(file, fileList) {
            // console.log('移除文件:', file, fileList);
            this.fileList = fileList;
        },

        handletpChange(file, fileList) {
            // console.log('文件改变:', file, fileList);
            this.fileList = fileList;
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url || URL.createObjectURL(file.raw);
            this.diaurldialog = true;
        },

        // 格式化键名，去除可能的特殊字符（如星号）
        formatKey(key) {
            return key.replace(/[*]/g, '').trim();
        },

        // 加载企业详情
        loadDetailcp(id) {
            getEnterpriseDetail(id).then(res => {
                this.companylist = res.data
            }).catch(err => {
                console.error('获取详情失败:', err)
            })
        },

        Queryqiyecp(id) {
            getEnterpriseProductList({ enterprisesId: id, pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
                // console.log(res.rows)
                this.guanlproducts = res.rows
            }).catch(err => {
                console.error('获取详情失败:', err)
            })
        },

        // 处理选项卡切换事件
        handleTabClick(tab) {
            // 可以在这里添加数据加载逻辑等   
            console.log('切换到', tab.name);
        },

        openComplaintDialog() {
            // 重置表单和状态
            this.complaintForm = {
                type: '',
                reason: ''
            };
            this.uploadedFileNames = [];
            this.fileList = [];
            // 显示弹窗
            this.dialogVisible = true;
        },

        // 上传单个图片
        uploadSingleImage(file) {
            return new Promise((resolve, reject) => {
                GcUploadImage({ file: file.raw }).then(res => {
                    if (res.code === 200) {
                        resolve(res.data.fileName);
                    } else {
                        reject(new Error('图片上传失败'));
                    }
                }).catch(err => {
                    reject(err);
                });
            });
        },

        // 提交投诉
        submitComplaint() {
            // 表单验证
            if (!this.complaintForm.type) {
                this.$message.error('请选择投诉类型');
                return;
            }

            if (!this.complaintForm.reason) {
                this.$message.error('请输入投诉原因');
                return;
            }

            // 显示加载中
            this.$loading({
                lock: true,
                text: '提交中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // 如果有选择的图片，先上传图片
            const uploadPromises = this.fileList.map(file => this.uploadSingleImage(file));

            Promise.all(uploadPromises).then(fileNames => {
                // 图片上传成功，将文件名用逗号拼接
                const imageParam = fileNames.join(',');

                // 提交投诉
                return getComplaintList({
                    targetType: 1, // 企业投诉类型为1
                    targetId: this.tousuId,
                    type: this.complaintForm.type,
                    reason: this.complaintForm.reason,
                    image: imageParam
                });
            }).then(res => {
                this.$loading().close();

                if (res.code === 200) {
                    this.$message.success('投诉提交成功');
                    this.dialogVisible = false;
                } else {
                    this.$message.error('投诉提交失败');
                }
            }).catch(err => {
                this.$loading().close();
                console.error('提交失败:', err);
                this.$message.error('操作失败，请重试');
            });
        }
    }
};
</script>

<style scoped>
.company-intro {
    margin:auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    max-width: 1600px;
}   

.company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #04142B;
    padding: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-radius: 5px;
    /* border-bottom: 1px solid #e4e7ed; */
}

.company-logo {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
}

.company-info {
    flex: 1;
    margin: 0 24px;
}

.company-info h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 500;
    color: #fff;

}

.company-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.meta-item {
    padding: 2px 8px;
    color: #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.company-address {
    margin: 8px 0;
    color: #ddd;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upload-date {
    margin: 0;
    color: #ddd;
    font-size: 13px;
}

.company-id {
    display: flex;
    align-items: center;
    color: #fff;
}

.tab-content-section {
    padding: 20px;
    background-color: #04142B;
    border-radius: 4px;
    min-height: 200px;
}

.section-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 16px 0;
    color: #fff;
}

.company-description,
.position-description,
.qualification-description {
    line-height: 1.8;
    color: #fff;
    text-align: justify;
    margin-bottom: 20px;
}

.qualification-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.qualification-tag {
    margin-bottom: 8px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .company-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-logo {
        margin-bottom: 16px;
    }

    .company-info {
        margin: 0 0 16px 0;
    }

    .company-id {
        align-self: flex-start;
    }

    .tab-content-section {
        padding: 15px;
    }
}

/* 产品列表优化 - 确保每行3个 */
.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

/* 产品图标 */
.product-icon {
    font-size: 24px;
    margin-bottom: 12px;
    color: #409eff;
    text-align: center;
}

/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1199px) {
    .products {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* 加载动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-standard {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.product-standard h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #303133;
}

.standard-item {
    font-size: 12px;
    margin: 4px 0 !important;
    line-height: 1.4;
    color: #606266;
    word-break: break-all;
    padding: 4px;
    border: none;
}

.standard-item strong {
    color: #303133;
    font-weight: 500;
    font-size: 12px;
}

.no-standard {
    margin-top: 12px;
    color: #909399;
    font-size: 12px;
    font-style: italic;
}

.header-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tilted-tag {
    display: inline-block;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #DDDDDD;
    margin: 0 5px;
    font-size: 12px;
    padding: 5px;
    transform: skew(-15deg);
    color: #fff;
}

.tag-text {
    transform: skew(15deg);
}

/* 弹窗的文本 .el-textarea__inner */
:deep(.el-textarea__inner) {
    background-color: #092742;
    border: 1px solid #00A3FF;
}

/* .el-dialog 弹窗样式优化 */
:deep(.el-dialog) {
    border: none;
}

:deep(.el-upload-dragger) {
    border: none;
}

:deep(.el-dialog__header) {
    border-bottom: none;
}

:deep(.el-upload--picture-card) {

    background: linear-gradient(181deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border: 1px solid #fff;
    width: 88px;
    height: 88px;
}

:deep(.el-select .el-input__inner) {
    border: 1px solid #00A3FF;

}

:deep(.el-tabs--card>.el-tabs__header) {
    border-bottom: none;
}

/* 标签页按钮样式 */
:deep(.el-tabs__item) {
    width: 206px;
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    margin: 0;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav) {
    border: 1px solid #04142B;
}

.buttontousu {
    width: 158px;
    height: 40px;
    background: #182F50;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    margin: 0 10px;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);
}

.buttontousu2 {
    width: 158px;
    height: 40px;
    margin: 0 10px;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);
    font-size: 14px;


    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}

.buttontousu2:hover {
    width: 158px;
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    color: #fff;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    transform: skew(-10deg);

}

/* 按钮 */
:deep(.el-button--small) {
    width: 300px;
    height: 46px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    transform: skew(-10deg);
}

:deep(.el-form-item__label) {
    color: #fff;
}

/* 企业信息介绍标题样式 */
.company-intro-title {
    width: 300px;
    height: 46px;
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transform: skew(-10deg);
}

/* 标题文字不倾斜 */
.title-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transform: skew(10deg);
    /* 反向倾斜抵消容器的倾斜效果 */
}

:deep(.el-upload--picture-card) {
    position: relative;
}

:deep(.el-upload--picture-card i) {
    color: #fff;
    text-align: center;
    font-size: 16px;
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
}
:deep(.el-textarea .el-input__count){
    background: none;
}
</style>